<template>
  <div class="app-container">
    <div class="container">
      <!--工具栏-->
      <div style="display:flex;justify-content:space-between;margin-bottom:10px">
        <div />
        <el-button type="primary" size="mini" @click="goBack">返回列表</el-button>
      </div>
      <div>
        <div :model="data" type="text">
          <div class="head-container">
            <strong style="margin-left: 20px">客户信息</strong>
            <el-divider/>
            <div>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form label-width="100px">
                      <el-form-item label="昵称：">
                        <span>{{ data.nickname }}</span>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form label-width="100px">
                      <el-form-item label="客户姓名:">
                        <span>{{ data.user_name }}</span>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form label-width="100px">
                      <el-form-item label="联系电话：">
                        <span>{{ data.phone }}</span>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form label-width="100px">
                      <el-form-item label="身份证号:">
                        <span>{{ data.id_code }}</span>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <div class="head-container">
            <strong style="margin-left: 20px">订单信息</strong>
            <el-divider/>
            <div>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form label-width="100px">
                      <el-form-item label="订单编号：">
                        <span>{{ data.order_no }}</span>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form label-width="100px">
                      <el-form-item label="订单日期:">
                        <span>{{ data.create_date }}</span>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="20">
                <el-col :span="8">
                  <div class="grid-content bg-purple">
                    <el-form label-width="100px">
                      <el-form-item label="订单状态：">
                        <span>{{ bankOrder[data.state] }}</span>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
                <el-col :span="16">
                  <div class="grid-content bg-purple">
                    <el-form label-width="100px">
                      <el-form-item label="订单备注:">
                        <span>{{ data.remark }}</span>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-col>
              </el-row>
            </div>
          </div>
          <el-table :data="data.orderItemList" size="small" style="width: 100%">
            <el-table-column label="产品名称" width="150px" align="center">
              <template slot-scope="scope">
                <div style="display:flex;align-items:center">
                  <div style="margin-right: 10px">
                    <el-avatar :size="50" :src="scope.row.cover_url" shape="square"/>
                  </div>
                  <div :title="scope.row.commodity_name" style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">{{ scope.row.commodity_name }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="show_variety" label="产品分类" align="center"/>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as order from '@/api/erp/order'
import COMMEN from '@/utils/commen'
export default {
  data() {
    return {
      data: {},
      bankOrder: COMMEN.BANK_ORDER
    }
  },
  computed: {
    order_no() {
      return this.$route.query.order_no
    }
  },
  created() {
    const param = {
      order_type: 0,
      order_no: this.order_no
    }
    order.orderDetail(param).then(res => {
      this.data = res
      console.log(this.data)
    })
  },
  methods: {
    goBack() {
      window.history.go(-1)
    }
  }
}
</script>
